<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html lang="en">
<!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
    <title>Brownie - Typography</title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="robots" content="index,follow" />
    <link rel="shortcut icon" href="images/favicon.ico" />
    <link rel="stylesheet" href="css/style.css" type="text/css" />
    <!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="js/html5.js"></script>
<script type="text/javascript" src="js/selectivizr-min.js"></script>
<link rel="stylesheet" href="css/ie_7.css" type="text/css" />
<![endif]-->
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
    <script type="text/javascript" src="js/all-in-one.js"></script>
    <script type="text/javascript" src="js/setup.js"></script>
<script type="text/javascript">
$(window).load(function(){
	$('#demo-side-bar').removeAttr('style');
});
</script>
<style type="text/css">
.demobar{display:none;}
#demo-side-bar{top:53px!important;left:90%!important;display:block!important;}
</style>
 <!--Dynamically creates ads markup-->
   <?php include("http://www.egrappler.com/ads-header.php"); ?>    <!-- Header -->
    <header class="header_bg clearfix">
		<div class="container clearfix">
        	<!-- Social -->
            	<ul class="social-links">
                	<li ><a href="javascript:"><img src="images/facebook.png" alt="Facebook"></a></li>
                    <li ><a href="javascript:"><img src="images/twitter.png" width="24" height="24" alt="Twitter"></a></li>
                </ul>
            <!-- /Social -->
			 <!-- Logo -->
			<div class="logo">
				<a href="index.html"><img src="images/logo.png" alt="" /></a>
			</div>
			 <!-- /Logo -->
			
			<!-- Master Nav -->
			<nav class="main-menu">
				<ul>
					<li><a href="index.html">Home</a></li>
					<li>
						<a>Pages</a>
						<ul>
							<li><a href="elements.html">Elements</a></li>
							<li><a href="typography.html">Typography</a></li>
							<li><a href="blog_single.html">Blog Single Post</a></li>
							
							<li><a href="javascript:">Pricing</a>
								<ul>
									<li><a href="pricing_2_cols.html">Pricing 2 Cols</a></li>
                                    <li><a href="pricing_3_cols.html">Pricing 3 Cols</a></li>
                                    <li><a href="pricing_4_cols.html">Pricing 4 Cols</a></li>
                                    <li><a href="pricing_5_cols.html">Pricing 5 Cols</a></li>
									
								</ul>
							</li>
                            
                            <li><a href="full_width.html">Full Width</a></li>
<li><a href="404.html">404 Page</a></li>
						</ul>
					</li>
					<li><a>Portfolio</a>
						<ul>
							<li><a href="portfolio_2_cols.html">Portfolio 2 Cols</a></li>
							<li><a href="portfolio_3_cols.html">Portfolio 3 Cols</a></li>
							<li><a href="portfolio_4_cols.html">Portfolio 4 Cols</a></li>
							<li><a href="portfolio_details.html">Portfolio Details</a></li>
						</ul>
					</li>
					<li><a href="blog.html">Blog</a></li>
					<li><a href="contact.html">Contact</a></li>
				</ul>
			</nav>
			<!-- /Master Nav -->
		</div>
</header>
    <!-- /Header -->
    <!-- START CONTENT -->
    <section class="container clearfix">
		<!-- Page Title -->
			<header class="container page_info clearfix">
				
					<h1 class="regular brown bottom_line">Typography</h1>
				
				<div class="clear"></div>
			</header>
			
		<!-- /Page Title -->

		
        
        <div class="col_1_5">
			<h3 class="red">One Fifth</h3>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
			</p>
		</div>
		
		<div class="col_1_5">
			<h3 class="red">One Fifth</h3>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
			</p>
		</div>
		
		<div class="col_1_5">
			<h3 class="red">One Fifth</h3>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
			</p>
		</div>
		
		<div class="col_1_5">
			<h3 class="red">One Fifth</h3>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
			</p>
		</div>
		
		<div class="col_1_5 last">
			<h3 class="red">One Fifth</h3>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
			</p>
		</div>

		
		<div class="clear padding20"></div>
		
		<div class="col_1_4">
			<h3 class="red">One Fourth</h3>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
			</p>
		</div>
		
		<div class="col_1_4">
			<h3 class="red">One Fourth</h3>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
			</p>
		</div>
		
		<div class="col_1_4">
			<h3 class="red">One Fourth</h3>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
			</p>
		</div>
		
		<div class="col_1_4 last">
			<h3 class="red">One Fourth</h3>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
			</p>
		</div>
		
		<div class="clear padding20"></div>
		
		
		<div class="col_1_3">
			<h3 class="red">One Third</h3>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
			</p>
		</div>
		
		<div class="col_1_3">
			<h3 class="red">One Third</h3>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
			</p>
		</div>
		
		<div class="col_1_3 last">
			<h3 class="red">One Third</h3>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
			</p>
		</div>
		
		<div class="clear padding20"></div>
		
		<div class="col_1_2">
			<h3 class="red">One Half</h3>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
			</p>
		</div>
		
		<div class="col_1_2 last">
			<h3 class="red">One Half</h3>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
			</p>
		</div>
		
		<div class="clear padding20"></div>
		
		<div class="col_2_3">
			<h3 class="red">Two Thirds</h3>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
			</p>
		</div>
		
		<div class="col_1_3 last">
			<h3 class="red">One Third</h3>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
			</p>
		</div>
		
		<div class="clear padding20"></div>
		
		<div class="col_1_4">
			<h3 class="red">One Fourth</h3>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
			</p>
		</div>
		
		<div class="col_3_4 last">
			<h3 class="red">Three Fourths</h3>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
			</p>
		</div>
        
        	<div class="clear padding15"></div>

		<div class="col_1_3">
			<h2 class="red regular">Blockquote</h2>
			<blockquote>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
			</blockquote>
		</div>
		
		<div class="col_2_3 last">
			<h2 class="red regular">Highlights and Dropcaps</h2>
			<p>
			
                <span class="dropcap">L</span>orem ipsum <span class="highlight yellow">dolor</span> sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et <span class="highlight green">dolore magna</span> aliqua. Ut enim ad <span class="highlight grey">minim veniam</span>, quis nostrud exercitation ullamco <span class="highlight blue">laboris</span> nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
			</p>			
		</div>
		
		
		

		
		<div class="clear padding15"></div>
        
        <div class="col_1_2">
			<h2 class="red regular">Image Alignment - Left Aligned</h2>
			<p>
				<img src="images/blog_thumbs_1.jpg" alt="" class="alignleft" />
				Asellus et leo semper felis dapibus tempor nec tempus augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec id tempor purus. Vestibulum dignissim lacus lectus. Donec lacus mauris, ullamcorper at accumsan venenatis, luctus vel nunc. Mauris sit amet velit odio. Nam sit amet nisi ligula, eget consequat ac urna gravida diam. Mauris rutrum ornare justolum lore dolor meannec. 
	Morbi est massa Asellus et leo semper felis dapibus tempor nec tempus augue.
			</p>
		</div>
        
        <div class="col_1_2 last">
			<h2 class="red regular">Image Alignment - Right Aligned</h2>
			<p>
				<img src="images/blog_thumbs_2.jpg" alt="" class="alignright" />
				Asellus et leo semper felis dapibus tempor nec tempus augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec id tempor purus. Vestibulum dignissim lacus lectus. Donec lacus mauris, ullamcorper at accumsan venenatis, luctus vel nunc. Mauris sit amet velit odio. Nam sit amet nisi ligula, eget consequat ac urna gravida diam. Mauris rutrum ornare justolum lore dolor meannec. 
	Morbi est massa Asellus et leo semper felis dapibus tempor nec tempus augue.
			</p>
		</div>
        
        <div class="clear padding20"></div>
        
		
		<div class="col_1_4">
			<h2 class="red regular">Headings</h2>
			<h1>H1 header title</h1>
			<h2>H2 header title</h2>
			<h3>H3 header title</h3>
			<h4>H4 header title</h4>
			<h5>H5 header title</h5>
			<h6>H6 header title</h6>
		</div>
        
        <div class="col_1_4">
			<h2 class="red regular">Numbered List</h2>
			<ul class="numbered_list">
            	<li>I am numered list</li>
                <li>I am numered list</li>
                <li>I am numered list</li>
                <li>I am numered list</li>
                <li>I am numered list</li>
            </ul>
		</div>
        
        <div class="col_1_4">
			<h2 class="red regular">Iconic List</h2>
			<ul class="iconic_list">
            	<li>I am numered list</li>
                <li>I am numered list</li>
                <li>I am numered list</li>
                <li>I am numered list</li>
                <li>I am numered list</li>
            </ul>
		</div>
        
        <div class="col_1_4 last">
			<h2 class="red regular">Arrow List</h2>
			<ul class="arrow_list">
            	<li>I am numered list</li>
                <li>I am numered list</li>
                <li>I am numered list</li>
                <li>I am numered list</li>
                <li>I am numered list</li>
            </ul>
		</div>
		
	
		<div class="clear padding20"></div>
	
		
		

		
		<div class="clear"></div>
	
	</section>
    <!-- END CONTENT -->
    <!-- footer -->
    <footer class="footer_bg_bottom clearfix">
		<div class="footer_bottom container">
			<div class="col_2_3">
				
				<div class="menu">
					<ul>
						<li><a href="index.html">Home</a></li>
                        <li><a href="elements.html">Elements</a></li>
						<li><a href="portfolio_4_cols.html">Portfolio</a></li>
						<li><a href="pricing_5_cols.html">Pricing</a></li>
						<li><a href="blog.html">Blog</a></li>
						<li><a href="contact.html">Contact</a></li>
					</ul>
				</div>
				
				
				<div class="clear padding20"></div>
				
				
				<p>
					&copy; Some Rights Reserved. &nbsp; <a href="#">Legal Notices</a>  
				</p>
				
			</div>
			
			<div class="clear padding20"></div>
		</div>
	</footer>
    <!-- /footer -->
	<div id="demo-side-bar">
   <?php include("http://www.egrappler.com/ad-sidebar.php");?>
   </div>
    </div>
    <!--wrapper end-->
	<!--Dynamically creates analytics markup-->
	 <?php include("http://www.egrappler.com/analytics.php");?>
</body>
</html>